const stats = new Stats()
stats.showPanel(0)
document.body.appendChild(stats.dom)

const setting = {
    ballNum: 50,
    d:1
}

function Ball(hue, size) {
    this.size = size
    this.hue = hue
    this.pos = { x: 0, y: 0 }
    this.target = { x: 0, y: 0 }
    this.k = 0
    this.b = 0

    this.lastPos = {x:0,y:0}

    this.draw = () => {
        // fill(this.hue, 100, 100)
        // circle(this.pos.x, this.pos.y, this.size)
        stroke(this.hue,100,100)
        strokeWeight(3)
        line(this.lastPos.x,this.lastPos.y,this.pos.x,this.pos.y)
    }

    this.update = () => {
        this.k = (this.target.y - this.pos.y) / (this.target.x - this.pos.x)
        this.b = this.target.y - this.k * this.target.x
        this.lastPos = JSON.parse(JSON.stringify(this.pos)) 
        if (this.pos.x < this.target.x) {
            this.pos.x += setting.d
        } else if (this.pos.x > this.target.x) {
            this.pos.x -= setting.d
        }
        this.pos.y = this.k * this.pos.x + this.b
        this.draw()
    }

}

let balls = []

function initBalls() {
    balls = []
    for (let i = 0; i < setting.ballNum; i++) {
        const hue = floor(random(100))
        const x = floor(random(0, width))
        const y = floor(random(0, height))
        const ball = new Ball(hue, 20)
        ball.pos.x = x
        ball.pos.y = y
        ball.target = { x: width / 2, y: height / 2 }
        

        balls.push(ball)
    }
}

function updateBalls() {
    balls.forEach(ball => {
        ball.update()
    })
}

function setup() {
    createCanvas(innerWidth, innerHeight)
    noStroke()
    frameRate(60)
    colorMode(HSB, 100)
    background(0)
    initBalls()
}

function draw() {
    stats.begin()
    // clear()
    // background(0)
    background(0, 0.9)
    updateBalls()
    stats.end()
}
